
<meta charset="utf-8">
<style>
    *{
        padding: 0;
        margin: 0;
        font-size: 12px;
    }
    .clearfix:after{
        display: table;
        content: "";
        clear:both;
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .top{
        width:810px;
    }
    .box{
        height: 414px;
        background: url(shoppingBg.jpg) no-repeat;
        position: relative;
    }
    #closebtn{
        background: red;
        margin-top:16px; 
        padding: 4px 16px;
        border-radius: 10px;
        color:white;
    }
    li{
        float: left;
        margin: 28px;
        list-style: none;
    }
    .lis1{
        position: absolute;
        top:110px;
        left:360px;
    }
    .lis2{
        position: absolute;
        top:220px;
        left:360px;
    }
    input{
        margin: 0;
        width:30px;
        height:20px;
        text-align: center;
    }
    #min,#plus{
        width: 20px;
    }
    #btn{
        background: red;
        width:70px;
        height: 30px;
        line-height: 30px;
        color: white;
        text-align: center;
        position: absolute;
        top:360px;
        left: 720px;
    }
    #totalprice{
        position: absolute;
        top:357px;
        left: 600px;
    }
    #yichu{
        margin-bottom:10px; 
    }
    .price{
        border: none;
        background: none;
    }
    .all{
        width:850px;
        margin:10px auto;
    }
    .amount{
        border: 1px solid rgb(187, 187, 187);
        border-left: none;
        border-right: none;
    }
</style>

<div class="all">
<div class="top clearfix">
    <img src="dd_logo.jpg" class="fl"/>
    <p id="closebtn" class="fr">关闭</p>
</div>

<div class="box">
    <ul class="lis1">
        <li>￥ <input value="21.90" class="price"/></li>
        <li>
            <input type="button" value="-" name="minus"/><input value="1" class="amount"/><input type="button" value="+" name="plus"/>
        </li>
        <li id="price0">￥ 21.90</li>
        <li><p id="yichu1">移入收藏</p><p> &nbsp;&nbsp;&nbsp;<span id="clear1">删除</span></p></li>
    </ul>

    <ul class="lis2">
        <li>￥ <input value="24.00" class="price"/></li>
        <li>
            <input type="button" value="-" name="minus"/><input value="1" class="amount"/><input type="button" value="+" name="plus" />
        </li>
        <li id="price1">￥ 24.00</li>
        <li><p id="yichu2">移入收藏</p><p> &nbsp;&nbsp;&nbsp;<span id="clear2">删除</span></p></li>
    </ul>

    <p id="totalprice"></p>
    <p id="btn">结算</p>
</div>
</div>
<script>
    //各种弹框
    closebtn.onclick = function(){
        window.close();
    }
    yichu1.onclick = function(){
        var flag = confirm("您确认要移入收藏吗？");
        if(flag){
            alert("移入成功");
        }
    }
    clear1.onclick = function(){
        var flag = confirm("您确认要删除吗？");
        if(flag){
            alert("删除成功");
        }
    }
    yichu2.onclick = function(){
        var flag = confirm("您确认要移入收藏吗？");
        if(flag){
            alert("移入成功");
        }
    }
    clear2.onclick = function(){
        var flag = confirm("您确认要删除吗？");
        if(flag){
            alert("删除成功");
        }
    }
    btn.onclick = function(){
        var flag = confirm("您本次购买的商品信息如下：\n\n商品名称：白岩松：岛上书店；\n商品数量：2件；\n商品总计：46.00；\n运费：0元；\n\n请确认以上信息是否有误！！！");
        if(flag){
            alert("订单提交成功");
        }
    }

    //价格变化
    var plusbtns = document.getElementsByName("plus");
    var minusbtns = document.getElementsByName("minus");
    var amounts = document.getElementsByClassName("amount");
    var prices = document.getElementsByClassName("price");
    var totalprice = document.getElementById("totalprice");

    function calctotal(){
        var total = 0;
        for(var k=0;k<prices.length;k++){
            var p = document.getElementById("price"+k);
            total = total + parseFloat(p.innerHTML.substring(1));
        }
        totalprice.innerHTML = "&yen;"+toround(total);
    }
    calctotal()
    
    for(var i=0;i<plusbtns.length;i++){
        plusbtns[i].xuhao = i;
        plusbtns[i].onclick = function(){
            var j = this.xuhao;
            amounts[j].value = parseInt(amounts[j].value) + 1;
            var price = document.getElementById("price"+j);
            price.innerHTML = "&yen;" + toround(prices[j].value*amounts[j].value);
            calctotal()
        }
    }  
    for(var i=0;i<minusbtns.length;i++){
        minusbtns[i].xuhao = i;
        minusbtns[i].onclick = function(){
            var j = this.xuhao;
            if(amounts[j].value>1){
                amounts[j].value = parseInt(amounts[j].value) - 1;
                var price = document.getElementById("price"+j);
                price.innerHTML = "&yen;" + toround(prices[j].value*amounts[j].value);
                calctotal()
            }            
        }
    }
    function toround(x){
        x = Math.round(x*100)/100;
        if((x+"").indexOf(".")==-1){
            return x+".00";
        }else{
            return x+"0";
        }
    }
</script>